<template>
    <page-view class="flex flex-col">
        <title-bar :show-back="true">
            【{{ foodDetail?.food_name }}】菜品的详细
            <template #menu>
                <Icon name="share-o" :size="22" @click="showShare = true" />
            </template>
        </title-bar>
        <!-- 将foodDetail对象转换成布尔类型 -->
        <my-loading :isLoading="!foodDetail">
            <div class="flex-1 overflow-auto pb-[var(--van-action-bar-height)]" ref="foodInfoContent">
                <List v-model:loading="isLoading" :finished="finished" finished-text="没有更多了"
                    @load="loadNextPageComment">
                    <!-- 菜品的图片 -->
                    <div class="w-full h-[230px]">
                        <img crossorigin="anonymous" v-lazy="baseURL + foodDetail.food_img"
                            class="w-full h-full object-cover" alt="">
                    </div>
                    <!-- 菜品的基本信息 -->
                    <ul
                        class="text-[14px] leading-[24px] box-border p-[5px] border-0 border-b border-dashed border-gray-500">
                        <li>
                            <span class="font-bold">菜品名称：</span>{{ foodDetail.food_name }}
                        </li>
                        <li>
                            <span class="font-bold">菜品价格：</span>￥ {{ foodDetail.price }}
                        </li>
                        <li>
                            <span class="font-bold">菜品分类：</span>{{ foodDetail.categoryInfo.category_name }}
                        </li>
                        <li class="indent-[2em]">
                            {{ foodDetail.food_desc }}
                        </li>
                    </ul>
                    <!-- 评论信息 -->
                    <div class="p-[5px]">
                        <div class=" text-primaryColor font-bold text-[18px]">最新评论</div>
                        <transition-group enter-active-class="animate__animated animate__slideInUp">
                            <div class="comment-item" v-for="item in commentInfoList" :key="item.id">
                                <div class="flex flex-row py-2 items-center">
                                    <img crossorigin="anonymous" v-lazy="baseURL + item.userInfo.user_photo"
                                        class="w-[40px] h-[40px] rounded-full" alt="">
                                    <div class="flex-1 ml-2">{{ item.userInfo.nickName }}</div>
                                    <div class="h-[40px] flex flex-col justify-between">
                                        <div class="text-[12px] text-gray-600">{{ formatDateTime(item.create_time) }}
                                        </div>
                                        <Rate readonly v-model="item.star" color="#ffd21e" void-icon="star" void-color="#eee" />
                                    </div>
                                </div>
                                <div class="text-[14px] leading-[24px]">
                                    {{ item.comment_text }}
                                </div>
                            </div>
                        </transition-group>
                    </div>
                </List>
            </div>
            <ActionBar>
                <ActionBarIcon icon="cart-o" text="购物车" :badge="totalCount"></ActionBarIcon>
                <ActionBarIcon icon="balance-o" text="金额" :badge="totalPrice"></ActionBarIcon>
                <ActionBarIcon icon="star" text="已收藏" color="#ff5000"></ActionBarIcon>
                <ActionBarButton :loading="isAddToShopCarting" @click="addToShopCart" type="warning" text="加入购物车">
                </ActionBarButton>
                <ActionBarButton @click="toShopCartList" type="danger" text="立即购买"></ActionBarButton>
            </ActionBar>
        </my-loading>
    </page-view>
    <ShareSheet v-model:show="showShare" title="立即分享给好友" :options="shareOptions" @select="shareOptionSelect">
    </ShareSheet>
</template>
<script>
import {
    ActionBar, ActionBarIcon, ActionBarButton,
    Rate, List, Icon, ShareSheet, Toast,
    ImagePreview, Dialog
} from "vant";
import API from "@/utils/API";
import { formatDateTime } from "../utils/DataTimeUtils";
import useClipboard from "vue-clipboard3";
import QRCode from "qrcode";
import html2canvas from "html2canvas";
import { mapGetters } from "vuex"
export default {
    name: "FoodDetail",
    inject: ["baseURL"],
    data() {
        return {
            foodDetail: null,
            star: 3,
            fid: null,
            pageIndex: 1,
            pageCount: 0,
            // 评论列表
            commentInfoList: [],
            isLoading: false,
            // 配置分享的信息
            shareOptions: [
                { name: "微信", icon: "wechat" },
                { name: "微博", icon: "weibo" },
                { name: "复制链接", icon: "link" },
                { name: "分享海报", icon: "poster" },
                { name: "二维码", icon: "qrcode" },
            ],
            // 是否显示分享的面板
            showShare: false,
            // 购物车的总件数和总价
            totalPrice: 0,
            totalCount: 0,
            // 是否正在加入购物车
            isAddToShopCarting: false
        };
    },
    async created() {
        let id = this.$route.params.id;
        this.fid = id;
        await this.findById(id);
        await this.getCommentInfoListByFid({ fid: id, pageIndex: this.pageIndex });
        // 当用户定登陆以后，才获取信息的购物车
        if (this.loginUserInfo) {
            await this.getMyShopCartTotalInfo();
        }
    },
    computed: {
        ...mapGetters(["loginUserInfo"]),
        finished() {
            return this.pageIndex >= this.pageCount;
        }
    },
    methods: {
        async findById(id) {
            let result = await API.foodInfo.findById(id);
            this.foodDetail = result;
        },
        async getCommentInfoListByFid({ fid, pageIndex }) {
            this.isLoading = true;
            let result = await API.commentInfo.getCommentInfoListByFid({ fid, pageIndex })
            // console.log(result);
            this.pageIndex = result.pageIndex;
            this.pageCount = result.pageCount;
            // 考虑到后期加载下一页，所以评论数据不能直接赋值，而是追加
            this.commentInfoList.push(...result.listData);
            this.isLoading = false;
        },

        // 加载下一页评论
        loadNextPageComment() {
            this.pageIndex++;
            this.getCommentInfoListByFid({
                fid: this.fid,
                pageIndex: this.pageIndex
            });
        },
        formatDateTime,
        shareOptionSelect(option, index) {
            if (index === 2) {
                this.shareFoodLink();
            } else if (index === 3) {
                this.shareFoodPost();
            }
            else if (index === 4) {
                this.shareQRCode();
            }
            this.showShare = false;
        },
        // 分享二维码
        shareQRCode() {
            // 分享二维码，将当前的网址生成二维码
            // toDataURL即为base64
            QRCode.toDataURL(location.href).then((base64Str) => {
                // console.log(base64Str);
                // 得到base64字符串，将其以图片的形式转成图片吗，vant里面就有预览图片的插件
                ImagePreview({
                    images: [base64Str],
                    onClose() {
                        Dialog.confirm({
                            title: "请确定",
                            message: "要将二维码保存在本地吗？"
                        }).then(() => {
                            let a = document.createElement("a");
                            a.href = base64Str;
                            a.download = "分享二维码.png";
                            a.click();
                        }).catch(() => {

                        })

                    }
                })
            })
        },
        // 生成海报
        async shareFoodPost() {
            // 添加音效
            let audio = new Audio();
            audio.src = require("../assets/audio/camera.mp3");
            audio.play();

            // 生成海报
            let canvas = await html2canvas(this.$refs.foodInfoContent, {
                useCORS: true
            });
            let ctx = canvas.getContext("2d");
            ctx.save();
            let x = parseInt(canvas.style.width) / 2;
            let y = parseInt(canvas.style.height) / 2;
            ctx.translate(x, y);

            ctx.fillStyle = "red";
            ctx.font = "36px 微软雅黑";
            ctx.textAlign = "center";
            ctx.textBaseline = "top"
            ctx.rotate(-Math.PI / 4);
            // 创建渐变
            let grd = ctx.createLinearGradient(-x, -y, canvas.width, canvas.height);
            grd.addColorStop(0, "red");
            grd.addColorStop(0.5, "blue");
            grd.addColorStop(0.75, "yellow");
            grd.addColorStop(1, "gold");
            ctx.fillStyle = grd;
            ctx.fillText("悠优美食分享", 0, 0);

            ctx.restore();
            // 创建二维码，并创建在画布上
            let qrCodeBase64Str = await QRCode.toDataURL(location.href);
            let img = new Image();
            img.src = qrCodeBase64Str;
            img.onload = () => {
                ctx.drawImage(img, 20, 50, 100, 100);
                // 将canvas的信息转换成base64字符串
                let base64Str = canvas.toDataURL("image/png");
                ImagePreview({
                    images: [base64Str],
                    className: "animate__animated animate__bounceIn"
                })
                // 下载海报图片
                let a = document.createElement("a");
                a.href = base64Str;
                a.download = ` ${this.foodDetail.food_name}海报.png`;
                a.click();
            }
        },
        // 分享菜品的连接
        shareFoodLink() {
            //说明用户点击的是复制连接
            const { toClipboard } = useClipboard();
            toClipboard(
                `嗨，我发现了一个非常好吃的东西，现在分享给你看一下。${location.href}`
            ).then(() => {
                Toast.success("复制成功，快发给你的小伙吧");
            });
        },
        // 获取购物车的总计信息
        async getMyShopCartTotalInfo() {
            let result = await API.shopCart.getMyShopCartTotalInfo();
            // console.log(result);
            this.totalPrice = result.totalPrice;
            this.totalCount = result.totalCount;
        },
        // 添加到购物车方法
        async addToShopCart() {
            // 如果用户没有登录 则弹出询问框 是否需要登录
            if (this.loginUserInfo) {
                // 用户登录了            
                this.isAddToShopCarting = true;
                await API.shopCart.addToShopCart({ fid: this.foodDetail.id, count: 1 });
                Toast.success("加入购车成功");
                // 加入成功后，需要重新获取购物车的总计信息
                await this.getMyShopCartTotalInfo();
                this.isAddToShopCarting = false;
            }
            else {
                Dialog.confirm({
                    title: "提示",
                    message: "你还没有登录，去登陆吗？"
                }).then(async () => {
                    this.$router.push({ name: "Login" })
                })
            }

        },
        toShopCartList() {
            if (this.loginUserInfo) {
                this.$router.push({ name: 'ShopCartList' })
            }
            else {
                // 说明没有登陆
                Dialog.confirm({
                    title: "提示",
                    message: "你还没有登录，现在登录吗"
                }).then(() => {
                    this.$router.push({ name: "Login" })
                }).catch(() => { })
            }
        }
    },
    components: {
        ActionBar,
        ActionBarIcon,
        ActionBarButton,
        Rate,
        List,
        Icon,
        ShareSheet
    },
};
</script>
<style>

</style>